<template>
	<movable-area class="fixed-box" v-if="isShow">
		<movable-view class="fixed-button" direction="vertical" :inertia="true">
			<view>
				<uni-fab ref="fab" :pattern="pattern" :content="content" @trigger="handleTrigger" />
			</view>
		</movable-view>
	</movable-area>
</template>
<script>

export default {
	name: 'CustomDrag',
	props: {
		isShow: {
			type: Boolean,
			default:false
		}
	},
	data() {
		return {
			//floating button
			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#0da297',
				buttonColor: '#0da297',
				iconColor: '#fff'
			},
			content: [{
				iconPath: this.$imgUrl+'index/service.png',
				selectedIconPath: this.$imgUrl+'index/service.png',
				text: '在线客服',
				active: true,
				index:0,
			},
			{
				iconPath: this.$imgUrl+'index/map.png',
				selectedIconPath: this.$imgUrl+'index/map.png',
				text: '附近网点',
				active: true,
				index:1,
			}],

		};
	},
	methods:{
		//选项被点击
		handleTrigger(e) {
			if(e.item.index==0){
				uni.makePhoneCall({
				    phoneNumber:this.$phone
				});
			}else if(e.item.index==1){
				//附近网点
				uni.navigateTo({
				    url: '/pages/map/index'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.fixed-box {
		pointer-events: none; 
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 700;
	}
	
	.fixed-button {
		pointer-events: auto;
		width: max-content;
		height: auto;
		
		z-index: 800;
		display: flex;
		align-items: center;
		justify-content: center;
		//控制按钮在页面的位置
		left: 0rpx;
		top:800rpx;
		
	}
	

</style>
